import React from 'react';

import styles from './UserPoint.css';
import {Link} from "react-router-dom";
import {UserInfoDomain} from "../../business/user/UserInfoDomain";
import UserService from "../../business/user/UserService";
import {message, Table} from "antd";
import PointService from "../../business/point/PointService";
import {PointsDomain} from "../../business/point/PointsDomain";


class UserPoint extends React.Component{

  constructor(props) {
    super(props);
    this.state ={
      userInfo:new UserInfoDomain(),
      pointList:[],
    }
    this.userService =new UserService();
    this.pointService = new PointService();
    this.showUserInfo = this.showUserInfo.bind(this);
    this.pointListHttpCallback = this.pointListHttpCallback.bind(this);

  }
  userService:UserService;
  pointService:PointService;
  state ={
    userInfo:new UserInfoDomain(),
    pointList:[],
  }

  columns = [{
    title: '时间',
    dataIndex: 'creationTime',
    key: 'creationTime',
    width:200,
    fixed: 'left',
  }, {
    title: '项目',
    dataIndex: 'type',
    key: 'type',
    width:200,
    fixed: 'left',
    render:(type,record)=>{
      if(type == 'reward_points'){
        return '获得积分';
      }else if(type == 'withdraw_reward'){
        return '获得积分撤销';
      }else if(type == 'consume_points'){
        return '商城消费积分';
      }else{//withdraw_consume
        return '商城消费积分撤销';
      }
    }
  }, {
    title: '积分流水',
    dataIndex: 'points',
    key: 'points',
    render:(points,record)=>{
      if(record.type == 'reward_points'){
        return (<div className={styles["colortips-orange"]}>+{points}</div>);
      }else if(record.type == 'withdraw_reward'){
        return <div className={styles["colortips-green"]}>-{points}</div>;
      }else if(record.type == 'consume_points'){
        return (<div className={styles["colortips-green"]}>-{points}</div>);
      }else{//withdraw_consume
        return (<div className={styles["colortips-orange"]}>+{points}</div>);
      }
    }
  }, {
    title: '积分来源',
    dataIndex: 'createdBy',
    key: 'createdBy',
    render:(text,record)=>{
      if(text=='ROLE_RP_ADMIN') { //ROLE_USER
        return '管理员';
      }else if(text=='ROLE_USER'){
        return '用户';
      }else{
        return '系统';
      }
    }
  }];

  componentWillMount(){
    let username = sessionStorage.getItem("username");
    let loginToken = sessionStorage.getItem("loginToken");
    if(username ==undefined || username =='' ||loginToken ==undefined ||loginToken ==''){
      window.document.location.href="/point-shopping";
      return ;
    }
    this.userService.queryUserInfo(username,loginToken,this.showUserInfo)
    this.pointService.queryRecordList(username,{},loginToken,this.pointListHttpCallback);
  }

  showUserInfo(res, isSuccess){
    if(isSuccess && res.code =='200'){
      this.setState({userInfo:res.data});
    }else {
      message.info(res.message);
    }
  }
  pointListHttpCallback(res, isSuccess){
    if(isSuccess && res.code =='200'){
      this.setState({pointList:res.data});
    }else {
      message.info(res.message);
    }
  }
  show(pointList){
    if(pointList == undefined){
      return ;
    }else{
      // @ts-ignore
      return (<Table columns={this.columns} dataSource={pointList}
                     bordered rowKey={list=>list.recordId}
                     pagination={{ pageSize: 5 }}
                     />);
    }

  }

  render() {
    const {userInfo,pointList} = this.state;
    return (
      <div className={styles.user_body}>
        <div className={styles.body_header}>
          <div className={styles.header_coins}>
            <div className={styles.coins_pic}><i></i></div>
            <div className={styles["coins_info-1"]}>
              <p className={[styles["info-1_balance"],styles.coins_info_1_p_first].join(' ')}>
                <span className={styles["balance_text"]}>我的累计积分余额</span>
                <span className={styles.balance_coins}>
                <span className={styles.coins_num}>{userInfo.currentPoints}</span>
                积分
              </span>
              </p>
              <p className={styles["info-1_balance"]}>
                <span className={styles["balance_text"]}>我的可用积分余额</span>
                <span className={styles.balance_coins}>
                <span className={styles.coins_num}>{userInfo.currentPoints}</span>
                积分
              </span>
              </p>
            </div>
            <Link className={[styles["mod-btn"], styles["mod-btn-black"]].join(' ')} to="/point-shopping">兑换礼品</Link>
          </div>
        </div>
        <div className={styles.body_content}>
          <div className={styles["mod-sheet"]}>
            <div className={styles.sheet_header}>
              <p className={styles.header_title}>积分记录</p>
              {/*<div className={styles.header_sift}>
                <div className={styles.sift_select}>
                  <select name="" id="select-type">
                    <option value="0">所有记录</option>
                    <option value="1">消费记录</option>
                    <option value="2">赚取记录</option>
                  </select>
                </div>
                <div className={styles.sift_select}>
                  <select name="" id="select-month">
                    <option value="0">所有日期</option>
                    <option value="1">最近1个月</option>
                    <option value="3">最近3个月</option>
                  </select>
                </div>
              </div>*/}
            </div>
            {this.show(pointList)}
            {/*<div className={styles.sheet_body}>
              <table className={styles.body_table}>
                <thead>
                <tr>
                  <th className={styles["th-1"]}>时间</th>
                  <th className={styles["th-2"]}>项目</th>
                  <th className={styles["th-3"]}>积分流水</th>
                  <th className={styles["th-4"]}>操作者</th>
                </tr>
                </thead>
                {this.showPointList(pointList)}
              </table>
            </div>
            {this.showPageNum([])}*/}
          </div>
        </div>
      </div>
    );
  }
}
export default UserPoint
